<!-- 访问分析 -->
<template>
    <el-scrollbar>
        <div class="view-overview">
            <el-row :gutter="15">
                <el-col :lg="24" :md="24" :xs="24">
                    <div class="card">
                        <date-range />
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="15">
                <el-col :lg="24" :md="24" :xs="24">
                    <div class="card">
                        <access-trends />
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="15">
                <el-col :lg="24" :md="24" :xs="24">
                    <div class="card">
                        <share-trends />
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="15">
                <el-col :lg="24" :md="24" :xs="24">
                    <div class="card">
                        <retention-trends />
                    </div>
                </el-col>
            </el-row>
        </div>
    </el-scrollbar>
</template>

<script lang="ts" name="overview" setup>
import DateRange from './components/date-range.vue';
import AccessTrends from './components/access-trends.vue';
import ShareTrends from './components/share-trends.vue';
import RetentionTrends from './components/retention-trends.vue';
</script>

<style lang="scss">
.view-overview {
	overflow-x: hidden;

	.card {
		background-color: #fff;
		border-radius: 6px;
		margin-bottom: 15px;
		letter-spacing: 0.5px;
		color: #000;
		line-height: 1;

		&__header {
			font-size: 15px;
			display: flex;
			align-items: center;
			font-weight: 700;
			height: 50px;
			padding: 0 20px;
		}

		&__container {
			padding: 0 20px 20px;
		}
	}
}
</style>
